<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>LayIM 3.x PC版本地演示</title>

    <link rel="stylesheet" href="../layui/css/layui.css">
    <style>
        html{background-color: #333;}
    </style>
</head>
<body>

<script src="/page/jquery-1.10.1.min.js"></script>
<script src="../layui/layui.js"></script>
<script>
    var socket =new WebSocket('ws://'+window.location.host + '/websocket.ws');
    function sendMsg(msg) {
        socket.send(msg);
    }
</script>
<script>

    $(function(){

        getInitIMData();


    });
    var initIm = null;
    var title = null;
    function getInitIMData() {
        $.ajax({
            url:"http://localhost:8080/monitor/bi/initIM.action",
            type:"get",
            data:{'userid':'000001'},
            dataType:"json",
            async:true,
            success: function(data){
                if (data.message=='OK'){
                    initIm =  data.result.data;
                    title  = initIm.mine.username;
//                    initIm =  JSON.stringify(initIm);
                    initIM();
                }
            },
            error:function(){

            }
        })
    }
    function initIM(){


        layui.use('layim', function(layim){

            //演示自动回复
            var autoReplay = [
                '您好，我现在有事不在，一会再和您联系。',
                '你没发错吧？face[微笑] ',
                '洗澡中，请勿打扰，偷窥请购票，个体四十，团体八折，订票电话：一般人我不告诉他！face[哈哈] ',
                '你好，我是主人的美女秘书，有什么事就跟我说吧，等他回来我会转告他的。face[心] face[心] face[心] ',
                'face[威武] face[威武] face[威武] face[威武] ',
                '<（@￣︶￣@）>',
                '你要和我说话？你真的要和我说话？你确定自己想说吗？你一定非说不可吗？那你说吧，这是自动回复。',
                'face[黑线]  你慢慢说，别急……',
                '(*^__^*) face[嘻嘻] ，是贤心吗？'
            ];

            //基础配置
            layim.config({

                //初始化接口
                init: initIm
//                //查看群员接口
//                ,members: {
//                    url: 'json/getMembers.json'
//                    ,data: {}
//                }

//                //上传图片接口
//                ,uploadImage: {
//                    url: '/upload/image' //（返回的数据格式见下文）
//                    ,type: '' //默认post
//                }
//
//                //上传文件接口
//                ,uploadFile: {
//                    url: '/upload/file' //（返回的数据格式见下文）
//                    ,type: '' //默认post
//                }

                //扩展工具栏
                ,tool: [{
                    alias: 'code'
                    ,title: '代码'
                    ,icon: '&#xe64e;'
                }]

                ,brief: false //是否简约模式（若开启则不显示主面板）

                ,title: title //自定义主面板最小化时的标题
//    ,right: '100px' //主面板相对浏览器右侧距离
                ,minRight: '190px' //聊天面板最小化时相对浏览器右侧距离
                ,initSkin: '4.jpg' //1-5 设置初始背景
                //,skin: ['aaa.jpg'] //新增皮肤
                ,isfriend: true //是否开启好友
                ,isgroup: true //是否开启群组
                ,min: true //是否始终最小化主面板，默认false
                ,notice: true //是否开启桌面消息提醒，默认false
                //,voice: false //声音提醒，默认开启，声音文件为：default.wav

                ,msgbox: layui.cache.dir + 'css/modules/layim/html/msgbox.html' //消息盒子页面地址，若不开启，剔除该项即可
                ,find: layui.cache.dir + 'css/modules/layim/html/find.html' //发现页面地址，若不开启，剔除该项即可
                ,chatLog: layui.cache.dir + 'css/modules/layim/html/chatLog.html' //聊天记录页面地址，若不开启，剔除该项即可

            });
            //监听在线状态的切换事件
            layim.on('online', function(data){
                alert("online");
            });

            //监听签名修改
            layim.on('sign', function(value){
                alert("修改签名");
            });

            //监听自定义工具栏点击，以添加代码为例
            layim.on('tool(code)', function(insert){
                layer.prompt({
                    title: '插入代码'
                    ,formType: 2
                    ,shade: 0
                }, function(text, index){
                    layer.close(index);
                    insert('[pre class=layui-code]' + text + '[/pre]'); //将内容插入到编辑器
                });
            });

//            //监听layim建立就绪
//            layim.on('ready', function(res){
//
//                //console.log(res.mine);
//
//                layim.msgbox(5); //模拟消息盒子有新消息，实际使用时，一般是动态获得
//
//                //添加好友（如果检测到该socket）
//                layim.addList({
//                    type: 'group'
//                    ,avatar: "http://tva3.sinaimg.cn/crop.64.106.361.361.50/7181dbb3jw8evfbtem8edj20ci0dpq3a.jpg"
//                    ,groupname: 'Angular开发'
//                    ,id: "12333333"
//                    ,members: 0
//                });
//                layim.addList({
//                    type: 'friend'
//                    ,avatar: "http://tp2.sinaimg.cn/2386568184/180/40050524279/0"
//                    ,username: '冲田杏梨'
//                    ,groupid: 2
//                    ,id: "1233333312121212"
//                    ,remark: "本人冲田杏梨将结束AV女优的工作"
//                });
//
//                setTimeout(function(){
//                    //接受消息（如果检测到该socket）
//                    layim.getMessage({
//                        username: "Hi"
//                        ,avatar: "http://qzapp.qlogo.cn/qzapp/100280987/56ADC83E78CEC046F8DF2C5D0DD63CDE/100"
//                        ,id: "10000111"
//                        ,type: "friend"
//                        ,content: "临时："+ new Date().getTime()
//                    });
//
//                    layim.getMessage({
//                        username: "贤心"
//                        ,avatar: "http://tp1.sinaimg.cn/1571889140/180/40030060651/1"
//                        ,id: "100001"
//                        ,type: "friend"
//                        ,content: "嗨，你好！欢迎体验LayIM。演示标记："+ new Date().getTime()
//                    });
//
//                }, 3000);
//            });

            //监听发送消息
            layim.on('sendMessage', function(data){
                var To = data.to;
                console.log(data);
//                alert(data);

                if(To.type === 'friend'){
                    layim.setChatStatus('<span style="color:#FF5722;">对方正在输入。。。</span>');
                }

                //演示自动回复
                setTimeout(function(){
                    var obj = {};
                    if(To.type === 'group'){
                        obj = {
                            username: '模拟群员'+(Math.random()*100|0)
                            ,avatar: layui.cache.dir + 'images/face/'+ (Math.random()*72|0) + '.gif'
                            ,id: To.id
                            ,type: To.type
                            ,content: autoReplay[Math.random()*9|0]
                        }
                    } else {
                        obj = {
                            username: To.name
                            ,avatar: To.avatar
                            ,id: To.id
                            ,type: To.type
                            ,content: autoReplay[Math.random()*9|0]
                        }
                        layim.setChatStatus('<span style="color:#FF5722;">在线</span>');
                    }
                    layim.getMessage(obj);
                }, 1000);
            });

            //监听查看群员
            layim.on('members', function(data){
                //console.log(data);
            });

            //监听聊天窗口的切换
            layim.on('chatChange', function(res){
                var type = res.data.type;
                console.log(res.data.id)
                if(type === 'friend'){
                    //模拟标注好友状态
                    //layim.setChatStatus('<span style="color:#FF5722;">在线</span>');
                } else if(type === 'group'){
                    //模拟系统消息
                    layim.getMessage({
                        system: true
                        ,id: res.data.id
                        ,type: "group"
                        ,content: '模拟群员'+(Math.random()*100|0) + '加入群聊'
                    });
                }
            });



        });
    }
    if(!/^http(s*):\/\//.test(location.href)){
        alert('请部署到localhost上查看该演示');
    }


</script>
</body>
</html>
